<template>
  <div class="Recomment-list">
    <div
      class="item openApp-btn"
      v-for="(item, index) in relatedList"
      :key="index"
    >
      <!-- 图文 -->
      <nuxt-link
        class="border openApp-btn"
        v-if="item.news_type == 1"
        :to="$i18n.path(`m/detail/article/${item.news_id}`)"
        exact
      >
        <div class="recommend-list-title">
          <h3>{{ item.title }}</h3>
          <p>
            <span class="author">{{ item.author }}</span>
            <span class="time">{{
              item.release_timestamp | dateFtt('yyyy-MM-dd hh:mm:ss')
            }}</span>
          </p>
        </div>
        <div class="recommend-list-pic">
          <img v-lazy="item.thumbs[0]" :alt="item.title" class="img-cover" />
        </div>
      </nuxt-link>
      <!-- 图集 -->
      <nuxt-link
        class="border openApp-btn"
        v-if="item.news_type == 2"
        :to="$i18n.path(`m/detail/gallery/${item.news_id}`)"
        exact
      >
        <div class="recommend-list-title">
          <h3>{{ item.title }}</h3>
          <p>
            <span class="author">{{ item.author }}</span>
            <span class="time">{{
              item.release_timestamp | dateFtt('yyyy-MM-dd hh:mm:ss')
            }}</span>
          </p>
        </div>
        <div class="recommend-gallery-pic">
          <img class="gallery-pic-top" src="~/assets/img/gl_bg.png" alt="image top border" />
          <div class="gallery-pic-bottom">
            <img v-lazy="item.thumbs[0]" :alt="item.title" class="img-cover" />
          </div>
        </div>
      </nuxt-link>
      <!-- 视频 -->
      <nuxt-link
        class="border openApp-btn"
        v-if="item.news_type == 3"
        :to="$i18n.path(`m/detail/video/${item.news_id}`)"
        exact
      >
        <div class="recommend-list-title">
          <h3>{{ item.title }}</h3>
          <p>
            <span class="author">{{ item.author }}</span>
            <span class="time">{{
              item.release_timestamp | dateFtt('yyyy-MM-dd hh:mm:ss')
            }}</span>
          </p>
        </div>
        <div class="recommend-list-pic">
          <img v-lazy="item.thumbs[0]" :alt="item.title" class="img-cover" />
          <img class="playe-btn" src="~/assets/img/play.svg" alt="play button" />
        </div>
      </nuxt-link>
    </div>
    <p class="tip">{{ $t('No_more') }}</p>
  </div>
</template>

<script>
export default {
  props: {
    relatedList: {
      default: []
    }
  }
};
</script>

<style scoped lang="scss">
.Recomment-list {
  .item {
    padding: 32px 28px 0;
    box-sizing: border-box;
    .border {
      border-bottom: 1px solid #eceff6;
      display: flex;
      padding: 0 0 32px 0;
      justify-content: space-between;
    }
    &:active {
      background: #f7f7f9;
      .border {
        border-bottom: 1px solid transparent; /*no*/
      }
    }
  }
  .recommend-list-title {
    width: 70%;
    position: relative;
    h3 {
      font-size: 28px;
      color: #0c0c1c;
      line-height: 40px;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    p {
      font-size: 20px;
      color: rgba(12, 12, 28, 0.7);
      position: absolute;
      left: 0;
      bottom: 0;
      line-height: 36px;
      height: 36px;
    }
    .author {
      float: left;
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .time {
      padding-left: 32px;
      float: left;
    }
  }
  .recommend-list-pic {
    width: 180px;
    height: 144px;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    .playe-btn {
      width: 48px;
      height: 48px;
    }
  } // 图集图片
  .recommend-gallery-pic {
    width: 180px;
    .gallery-pic-top {
      width: 100% !important;
      height: 12px !important;
    }
    .gallery-pic-bottom {
      width: 180px;
      height: 144px;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      img {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    }
  }
  .tip {
    text-align: center;
    font-size: 24px;
    line-height: 96px;
    color: #667489;
  }

  .img-cover {
    width: 180px;
    height: 144px;
    object-fit: cover;
  }
}

img[lazy=loading] {
  width: 180px;
  height: 144px;
  object-fit: cover;
}
</style>
